/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

// import React, { Component } from 'react';
// import {
//   Platform,
//   StyleSheet,
//   Text,
//   View,Image
// } from 'react-native';

// const instructions = Platform.select({
//   ios: 'Press Cmd+R to reload,\n' +
//     'Cmd+D or shake for dev menu',
//   android: 'Double tap R on your keyboard to reload,\n' +
//     'Shake or press menu button for dev menu',
// });

// type Props = {};
// export default class App extends Component<Props> {
//   render() {
//     return (
//       <View style={styles.container}>
//         <Text style={styles.welcome}>
//           Welcome to React Native!
//         </Text>
//         <Text style={styles.instructions}>
//           To get started, edit App.js
//            这个是一个app页面改变后的
//         </Text>
//         <Text style={styles.instructions}>
//           {instructions}
//         </Text>
//       </View>
//     );
//   }
// }

// const styles = StyleSheet.create({
//   container: {
//     flex: 1,
//     justifyContent: 'center',
//     alignItems: 'center',
//     backgroundColor: '#F5FCFF',
//   },
//   welcome: {
//     fontSize: 20,
//     textAlign: 'center',
//     margin: 10,
//     backgroundColor:'red',
//   },
//   instructions: {
//     textAlign: 'center',
//     color: '#333333',
//     marginBottom: 5,
//   },
// });

// ------------------------------分割

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Image
} from 'react-native';

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' +
        'Cmd+D or shake for dev menu',
    android: 'Double tap R on your keyboard to reload,\n' +
        'Shake or press menu button for dev menu',
});
export default class App extends Component {
    render() {
        return (
            <View style={styles.container} >
                <View>
                    {/* <Image style={styles.img} source={require('./1.jpg')} /> */}
                    <Image style={styles.img} source={require('./public/default_banner.png')} />
                </View>
                <View style={{height:1500}}>
                    {/* 第一个开始 */}
                    <View style={styles.vone}>
                        <View style={{flex:1,marginRight: 2,backgroundColor:'#F6485A',height:80,justifyContent: 'center',alignItems: 'center',}}  >
                            <Text style={{textAlign:'center',alignItems: 'center',}} >
                                酒店
                            </Text>
                            <Image style={{width:30,height:30}}  source={require('./public/hotel.png')} />   
                        </View>
                        <View style={{flex:1,  height: 80,marginRight: 2, }} >
                            <View style={{flex:1,  height: 80,marginBottom: 2, backgroundColor: '#F6485A',justifyContent: 'center',alignItems: 'center', }} >
                                <Text style={{textAlign:'center',alignItems: 'center',}} >
                                    特惠酒店
                                </Text>
                            </View>
                            <View style={{flex:1,  height: 80, backgroundColor: '#F6485A',justifyContent: 'center',alignItems: 'center', }} >
                                <Text style={{textAlign:'center',alignItems: 'center',}} >
                                    客栈
                                </Text>
                            </View>
                        </View>
                        <View style={{flex:1, height: 80, }} >
                            <View style={{flex:1, marginBottom: 2, height: 80, backgroundColor: '#F6485A',justifyContent: 'center',alignItems: 'center', }} >
                                <Text style={{textAlign:'center',alignItems: 'center',}} >
                                    海外酒店
                                </Text>
                            </View>
                            <View style={{flex:1,  height: 80, backgroundColor: '#F6485A',justifyContent: 'center',alignItems: 'center', }} >
                                <Text style={{textAlign:'center',alignItems: 'center',}} >
                                    民宿
                                </Text>
                            </View>
                        </View>
                    </View>
                    {/* 第一个结束 */}
                    {/* 第二个开始 */}
                    <View style={styles.vone}>
                        <View style={{flex:1,backgroundColor:'#46A3F7',marginRight: 2,height:80,justifyContent: 'center',alignItems: 'center',}}  >
                            <Text style={{textAlign:'center',alignItems: 'center',}} >
                                机票
                            </Text>
                        </View>
                        <View style={{flex:1,  height: 80,marginRight: 2, }} >
                            <View style={{flex:1,  height: 80,marginBottom: 2, backgroundColor: '#46A3F7',justifyContent: 'center',alignItems: 'center', }} >
                                <Text style={{textAlign:'center',alignItems: 'center',}} >
                                    低价机票
                                </Text>
                            </View>
                            <View style={{flex:1,  height: 80, backgroundColor: '#46A3F7',justifyContent: 'center',alignItems: 'center', }} >
                                <Text style={{textAlign:'center',alignItems: 'center',}} >
                                   火车票
                                </Text>
                            </View>
                        </View>
                        <View style={{flex:1, height: 80,}} >
                            <View style={{flex:1,  height: 80,marginBottom: 2, backgroundColor: '#46A3F7',justifyContent: 'center',alignItems: 'center', }} >
                                <Text style={{textAlign:'center',alignItems: 'center',}} >
                                   汽车票 · 船票
                                </Text>
                            </View>
                            <View style={{flex:1,  height: 80, backgroundColor: '#46A3F7',justifyContent: 'center',alignItems: 'center', }} >
                                <Text style={{textAlign:'center',alignItems: 'center',}} >
                                   专车 · 自驾
                                </Text>
                            </View>
                        </View>
                    </View>
                    {/* 第二个结束 */}
                    {/* 第三个开始 */}
                    <View style={styles.vone}>
                        <View style={{flex:1,marginRight: 2, backgroundColor:'#7CBE28',height:80,justifyContent: 'center',alignItems: 'center',}}  >
                            <Text style={{textAlign:'center',alignItems: 'center',}} >
                                度假
                            </Text>
                        </View>
                        <View style={{flex:1,  height: 80, marginRight: 2, }} >
                            <View style={{flex:1,  height: 80,marginBottom: 2, backgroundColor: '#7CBE28',justifyContent: 'center',alignItems: 'center', }} >
                                <Text style={{textAlign:'center',alignItems: 'center',}} >
                                    景点 · 门票
                                </Text>
                            </View>
                            <View style={{flex:1,  height: 80, backgroundColor: '#7CBE28',justifyContent: 'center',alignItems: 'center', }} >
                                <Text style={{textAlign:'center',alignItems: 'center',}} >
                                    自由行
                                </Text>
                            </View>
                        </View>
                        <View style={{flex:1, height: 80, }} >
                            <View style={{flex:1, height: 80,marginBottom: 2, backgroundColor: '#7CBE28',justifyContent: 'center',alignItems: 'center', }} >
                                <Text style={{textAlign:'center',alignItems: 'center',}} >
                                    旅游团购
                                </Text>
                            </View>
                            <View style={{flex:1,  height: 80, backgroundColor: '#7CBE28',justifyContent: 'center',alignItems: 'center', }} >
                                <Text style={{textAlign:'center',alignItems: 'center',}} >
                                    周边 · 短途
                                </Text>
                            </View>
                        </View>
                    </View>
                    {/* 第三个结束 */}
                    {/* 金融保险开始 */}
                    <View style={styles.vone}>
                        <View style={{flex:1,marginRight: 2, backgroundColor:'#F7990E',height:80,justifyContent: 'center',alignItems: 'center',}}  >
                            <Text style={{textAlign:'center',alignItems: 'center',}} >
                                金融 · 理财
                            </Text>
                        </View>
                        <View style={{flex:1,  height: 80, marginRight: 2,backgroundColor:'#F7990E',height:80,justifyContent: 'center',alignItems: 'center', }} >
                          <Text style={{textAlign:'center',alignItems: 'center',}} >
                              保险 · 车险
                          </Text>
                        </View>
                        <View style={{flex:1, height: 80,backgroundColor:'#F7990E',height:80,justifyContent: 'center',alignItems: 'center', }} >
                          <Text style={{textAlign:'center',alignItems: 'center',}} >
                              全球购
                          </Text>
                        </View>
                    </View>
                    {/* 金融保险结束 */}

                    {/* 下一个板开始 */}
                    <View style={{marginTop: 10,}}>

                      <View style={{flexDirection: 'row',}}>
                        <View style={{flex:1, marginBottom: 2, height: 40, backgroundColor: '#F6485A',justifyContent: 'center',alignItems: 'center', }}>
                            <Text>签证 · WiFi</Text>
                        </View>
                        <View style={{flex:1, marginBottom: 2, height: 40, backgroundColor: '#F6485A',justifyContent: 'center',alignItems: 'center', }}>
                            <Text>出境游</Text>
                        </View>
                        <View style={{flex:1, marginBottom: 2, height: 40, backgroundColor: '#F6485A',justifyContent: 'center',alignItems: 'center', }}>
                            <Text>一日游</Text>
                        </View>
                        <View style={{flex:1, marginBottom: 2, height: 40, backgroundColor: '#F6485A',justifyContent: 'center',alignItems: 'center', }}>
                            <Text>美食林</Text>
                        </View>
                      </View>
                      {/* 下 */}
                      <View style={{flexDirection: 'row',}}>
                        <View style={{flex:1, marginBottom: 2, height: 40, backgroundColor: '#F6485A',justifyContent: 'center',alignItems: 'center', }}>
                            <Text>汽车票</Text>
                        </View >
                        <View style={{flex:1, marginBottom: 2, height: 40, backgroundColor: '#F6485A',justifyContent: 'center',alignItems: 'center', }} >
                            <Text>国内游</Text>
                        </View>
                        <View style={{flex:1, marginBottom: 2, height: 40, backgroundColor: '#F6485A',justifyContent: 'center',alignItems: 'center', }}>
                            <Text>超级巴士</Text>
                        </View>
                        <View style={{flex:1, marginBottom: 2, height: 40, backgroundColor: '#F6485A',justifyContent: 'center',alignItems: 'center', }}>
                            <Text>攻略</Text>
                        </View>
                      </View>
                    </View>
                    {/* 结束 */}
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'space-between',
        marginTop: 20,
        // justifyContent: 'center',
        // alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    img: {
        height: 100,
        resizeMode:'stretch',
        // resizeMode enum('cover', 'contain', 'stretch', 'repeat', 'center')


    },
    vone: {
        height: 80,
        // flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginBottom: 2,
        marginTop: 2,
    },
    one:{
        backgroundColor: 'red',
        width:50,
        height:80,

    },


});
